import '../styles/image.css'

//
function externalLinksImg() {
  const imgEle = document.createElement('img')
  imgEle.src = 'https://picsum.photos/536/354'
  return imgEle
}

//
function backgroundImg() {
  const container = document.createElement('div')
  container.classList.add('container')
  // container.style.backgroundImage = `url(${img})`

  return container
}

//
import img from '../assets/images/2.jpg'
function importFromImg() {
  const imgEle = document.createElement('img')
  imgEle.src = img

  return imgEle
}

//
function requireImg() {
  const imgEle = document.createElement('img')
  imgEle.src = require('../assets/images/3.jpg')
  // imgEle.src = require('../assets/images/1.jpg').default

  return imgEle
}

//
function importImg() {
  const imgEle = document.createElement('img')

  const getImg = import('../assets/images/4.jpg')

  getImg.then(res => {
    imgEle.src = res.default
  })

  return imgEle
}

document.body.appendChild(externalLinksImg())
document.body.appendChild(backgroundImg())
document.body.appendChild(importFromImg())
document.body.appendChild(requireImg())
document.body.appendChild(importImg())
